<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>智慧社区-互动社区</title>

    <!-- Bootstrap -->
    <link href="<s:url value="/assets/front/css/bootstrap.min.css"></s:url>" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="<s:url value="/assets/front/css/common.css"></s:url>" />
    <link rel="stylesheet" type="text/css" href="<s:url value="/assets/front/css/detail.css"></s:url>"/>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<%@include file="/WEB-INF/views/front/include/menu.jsp"%>
<div class="container post-wrap">
    <div >
        <div class="post" >
            <div class="post-head clearfix" >
                <h2 class="title" >${topic.topicName}</h2>
                <div class="head-bottom" ><span >${topic.createDate} ${topic.createTime}</span>
                <span ><span >查看</span><span >${topic.clickNumber}</span></span>
                <span ><span >回复</span><span >${topic.commentNumber}</span></span>
                </div>
            </div>
            <div class="post-main clearfix" >
                <div class="user" >
                    <div class="avatar" >
                        <img src="//p.qlogo.cn/stranger/9mhibHRiabQo8ialMS4ickfuu7dBicTzpREPX/140" >
                        <span class="g-level lv2" ></span>
                    </div>
                </div>
                <div class="content-wrapper" id="post_content_wrapper" >
                    <div class="userinfo" >
                        <span class="username" >${user.name}</span>
                        <c:choose>
                            <c:when test="${user.gender == '02'}">
                                <span class="male" ></span>
                            </c:when>
                            <c:when test="${user.gender == '03'}">
                                <span class="female" ></span>
                            </c:when>
                            <c:otherwise></c:otherwise>
                        </c:choose>


                        <span >
                            <span class="honour " ></span>
                        </span>
                    </div>
                    <div >
                        <div class="content" >
                            ${topic.topicContent}
                        </div>
                    </div>
                    <div id="topic_comment">
                        <div class="btn-container" >
                            <div class="<c:if test="${praise != null}">liked</c:if>"  onclick="onPraise()" id="praise">赞(${topic.praiseNumber})</div>
                            <div id="topic_reply">回复(${topic.commentNumber})</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <c:if test="${topic.commentNumber > 0}">
        <div class="comment-wrap" >
            <div class="comment-top clearfix" >
                <div class="top-left" >全部评论</div>
            </div>
            <ul class="comment-list" id="comment_list" >

            </ul>
            <div class="<!--hide-->" >
                <ul class="pg" >
                    <li class="pg_prev pg_empty" ><span >上一页</span></li>
                    <li class="pg_menu" >
                        <span class="pg_num" ><span id="page_num">第1页</span><span class="pg_selector" ></span></span>
                        <div class="pg_numlist_wrap"  style="top: -300px; height: 300px; visibility: hidden;">
                            <ul class="pg_numlist clearfix" >

                            </ul>
                            <div class="pg_slider" >
                                <div class="pg_bar"  style="height: 35.1724px; top: 0px;"></div>
                            </div>
                            <div ></div>
                        </div>
                    </li>
                    <li class="pg_next " ><span >下一页</span></li>
                </ul>
            </div>
        </div>
        </c:if>
        <div class="comment-form clearfix"  style="padding: 20px 20px 10px; margin-top: 6px; margin-bottom: 160px; border: 1px solid rgb(204, 204, 204);">
            <div class="comment-content" ><textarea class="comment-textarea" placeholder="我也说一句..." ></textarea></div>
            <div class="btn-area clearfix" >
                <div class="right-area" ><button class="btn-submit" >回复</button></div><noscript ></noscript></div>
        </div>
    </div>

</div>
<%@include file="/WEB-INF/views/front/include/footer.jsp"%>
<script type="text/javascript">
    var newCurrentPage = 1;
    var pageCount = 1;
    var topicId = ${topic.sysId};
    /**
     * 弹出话题的评论框
     * */
    $('#topic_reply').click(function () {
        $('.comment_reply').find('.comment-form').remove();
        var ele = $('#topic_comment').find('div.comment-form').html();
        if(ele != null){
            $('#topic_comment .comment-form').remove();
            return;
        }
        var replyHtml = '<div class="comment-form clearfix" >'+
                '<div class="comment-content" >' +
                '<textarea class="comment-textarea" placeholder="" ></textarea>' +
                '</div>'+
                '<div class="btn-area clearfix" >'+
                '<div class="right-area" >' +
                '<button class="btn-cancel" >取消</button>' +
                '<button class="btn-submit" >回复</button>' +
                '</div>' +
                '<noscript ></noscript>' +
                '</div>'+
                '</div>';
        $('#topic_comment').append(replyHtml);

        $('.btn-cancel').bind('click',function(){
            $(this).parents('div.comment-form').remove();
        });
        $('.btn-submit').bind('click',function () {
            var obj = $(this);
            toDoReply(obj);
        });
    });

    $('.btn-submit').click(function () {
        var obj = $(this);
        toDoReply(obj);
    });

    /**
     * 执行回复话题
     * */
    function toDoReply(obj){
        var topicId = ${topic.sysId};
        var comment = obj.parents('.comment-form').find('.comment-textarea').val();
        $.ajax({
            type : "post",
            url : "${pageContext.request.contextPath}/topic/pass/reply",
            data: {"topicId":topicId,"comment":comment},
            dataType : "json",
            success : function(datas) {
                if ( datas.code =='200'){
                    location.reload();
                }else if(datas.code == '500') {
                    alert(datas.message);
                }else {
                    location.href = "${pageContext.request.contextPath}/login";
                }
            },
            error :function(xhr) {
                location.href = "${pageContext.request.contextPath}/login";
            }
        });
    }
    /**
     * 评论列表
     **/
    function commentList(obj) {
        obj.pageSize = obj.pageSize == null ? 10 : obj.pageSize;
        obj.currentPage = obj.currentPage == null ? 1 : obj.currentPage;
        obj.topicId = obj.topicId == null ? '' : obj.topicId;
        $.ajax({
            type : "post",
            url : "${pageContext.request.contextPath}/comment/list",
            data : {"paging.pageSize": obj.pageSize ,"paging.currentPage": obj.currentPage,"topicId":obj.topicId },
            dataType : "json",
            success : function(datas) {
                if ( datas.code =='200'){
                    var data = datas.data;
                    var paging = data.paging;
                    var list  = data.list;
                    setPageInfo(paging);
                    var html ='';
                    $.each(data.list, function(index,element) {
                        html += getCommentHtml(element);
                    });
                    $('#comment_list').empty();
                    $('#comment_list').append(html);

                    //点击评论的回复事件
                    $('.btn-reply').bind('click', function () {
                        var ele = $(this).parents('.comment_reply').find('.comment-form').html();
                        if(ele != null){
                            $('.comment_reply').find('.comment-form').remove();
                            return;
                        }
                        var name  = $(this).parents('div.content-wrapper').find('span.username').html();
                        var html = toDoCommentReply(name);
                        $('.comment_reply').find('.comment-form').remove();
                        $('#topic_comment').find('.comment-form').remove();
                        $(this).parents('.comment_reply').append(html);

                        $('.btn-cancel').bind('click',function(){
                            $(this).parents('div.comment-form').remove();
                        });

                        //执行评论的回复
                        $('.comment-btn-submit').click(function () {
                            var topicId = ${topic.sysId};
                            var comment = $(this).parents('.comment-form').find('.comment-textarea').val();
                            var commentId =  $(this).parents('li.comment').attr('data-sysid');
                            $.ajax({
                                type : "post",
                                url : "${pageContext.request.contextPath}/comment/pass/reply",
                                data: {"topicId":topicId,"comment":comment,"commentId":commentId},
                                dataType : "json",
                                success : function(datas) {
                                    if ( datas.code =='200'){
                                        location.reload();
                                    }else if(datas.code == '500') {
                                        alert(datas.message);
                                    }else {
                                        location.href = "${pageContext.request.contextPath}/login";
                                    }
                                },
                                error :function(xhr) {
                                    location.href = "${pageContext.request.contextPath}/login";
                                }
                            });
                        });

                    });

                }
            },
            error :function(xhr) {

            }
        });



    }

    /**
     * 评论HTML
     */
    function getCommentHtml(databean){
        var replydatabean = databean.databean;
        var user = databean.sysUser;
        var commentHtml = '<li class="comment clearfix" data-sysId ="' + databean.sysId + '" >' +
                            '<div class="user" >' +
                                '<div class="avatar" >' +
                                    '<img src="//p.qlogo.cn/stranger/9mhibHRiabQo8ialMS4ickfuu7dBicTzpREPX/140" >' +
                                    '<span class="g-level lv11" ></span>' +
                                '</div>' +
                            '</div>' +
                            '<div class="content-wrapper" >' +
                                '<div class="userinfo" >' +
                                    '<span class="username" >'+user.name +'‭</span>';
                    if (user.gender == '02'){
                        commentHtml +='<span class="male" ></span>';
                    } else if (user.gender == '03'){
                        commentHtml +='<span class="female" ></span>';
                    } else {
                        commentHtml +='<span class="" ></span>';
                    }
                    commentHtml += '<span >' +
                                        '<span class="honour" ></span>' +
                                    '</span>' +
                                '</div>' +
                                '<div class="content" >' +
                                     databean.comment +
                                '</div>' +
                                    '<noscript ></noscript><noscript ></noscript><noscript ></noscript>';
            if (replydatabean != undefined){
                commentHtml += '<div class="ref-comment" >' +
                                    '<div class="top" >' +
                                        '<span >'+ replydatabean.floorNum +'楼</span>' +
                                        '<span class="nick-name" >' +
                                            replydatabean.sysUser.name +
                                        '</span>' +
                                        '<span class="hide" >展开</span>' +
                                    '</div>' +
                                    '<div class="content" >' + replydatabean.comment + '</div>' +
                                    '<div class="hide" ><noscript ></noscript><noscript ></noscript><noscript ></noscript></div>' +
                                '</div>';
            }
                    commentHtml += '<div class="comment_reply">' +
                                     '<div class="bottom-actions" >' +
                                        '<span >'+ databean.floorNum+'楼</span>' +
                                        '<span >'+ databean.createDate +' '+ databean.createTime +'</span>' +
                                        '<span class="btn-reply" ><i class="icon" ></i><span >回复</span></span>' +
                                    '</div>' +
                                '</div>' +
                            '</div>' +
                        '</li>';
        return commentHtml;

    }

    function setPageInfo(paging) {
        pageCount = paging.pageCount;
        newCurrentPage = paging.currentPage;
        $('#page_num').html('第' + newCurrentPage + '页');
        if (newCurrentPage == 1){
            $('.pg_prev').addClass('pg_empty');
            $(".pg_prev").unbind("click",prevPage);
        }else {
            $('.pg_prev').removeClass('pg_empty');
            $(".pg_prev").bind("click",prevPage);
        }
        if (newCurrentPage == pageCount){
            $('.pg_next').addClass('pg_empty');
            $(".pg_next").unbind("click",nextPage);
        }else {
            $(".pg_next").bind("click",nextPage);
            $('.pg_next').removeClass('pg_empty');
        }
        var lis = '';
        for (var i = 1 ; i <= pageCount; i++ ){
            if (newCurrentPage == i){
                lis += '<li class="active"><span >第'+ i +'页</span></li>';
            } else {
                lis += '<li onclick="gotoPage(' + i + ')" ><span >第'+ i + '页</span></li>';
            }
        }

        if(pageCount < 10){

            $('.pg_numlist_wrap').css('top', '-' + (30 * pageCount) + 'px');
            $('.pg_numlist_wrap').css('height', '' + (30 * pageCount) + 'px');
        }else {
            $('.pg_numlist_wrap').css('top', '-300px');
            $('.pg_numlist_wrap').css('height', '300px');
        }

        $('.pg_numlist').empty();
        $('.pg_numlist').append(lis);
    }

    function gotoPage(pageNumber) {
        commentList({
            currentPage: pageNumber,
            topicId :topicId
        });
        $('.pg_numlist_wrap').css('visibility', 'hidden');
    }

    /**
     * 下一页
     */
    function nextPage() {
        var  next_page = (newCurrentPage + 1) > pageCount ? pageCount : (newCurrentPage + 1);
        commentList({
            currentPage: next_page,
            topicId :topicId
        });
    }
    /**
     * 上一页
     */
    function prevPage() {
        var  prev_page = (newCurrentPage - 1) < 1 ? 1 : (newCurrentPage - 1) ;
        commentList({
            currentPage: prev_page,
            topicId :topicId
        });

    }

    $(function () {
        commentList({
            currentPage : 1,
            topicId :topicId
        });
    });

    /**
     *  回复评论的HTML体
     * @param name
     * @returns {string}
     */
    function toDoCommentReply(name) {
        var comment_reply = '<div class="comment-form clearfix" >'+
                                '<div class="comment-content" >'+
                                  '<textarea class="comment-textarea" placeholder="回复' + name + ':" ></textarea>'+
                                '</div>'+
                                '<div class="btn-area clearfix" >'+
                                    '<div class="right-area" >'+
                                        '<button class="btn-cancel" >取消</button>'+
                                        '<button class="btn-submit comment-btn-submit" >回复</button>'+
                                    '</div>'+
                                    '<noscript ></noscript>'+
                                '</div>'+
                            '</div>';
        return comment_reply;
    }
    /*
    * 执行点赞
    * */
    function onPraise() {
        var bool = $('#praise').hasClass('liked');
        if(!bool){
            var url = "${pageContext.request.contextPath}/topic/pass/" + topicId + "/praise";
            $.ajax({
                type : "post",
                url : url,
                data: {"topicId":topicId},
                dataType : "json",
                success : function(datas) {
                    if ( datas.code =='200'){
                        $('#praise').addClass('liked');
                        $('#praise').html('赞(${topic.praiseNumber + 1 })');
                    }else if(datas.code == '500') {
                        alert(datas.message);
                    }else {
                        location.href = "${pageContext.request.contextPath}/login";
                    }
                },
                error :function(xhr) {
                    location.href = "${pageContext.request.contextPath}/login";
                }
            });
        }
    }


</script>
</body>
</html>
